<template>
  <div class="h-full flex flex-col">
    <a-card>
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          {{ $t("user.verification-code.required1115668811") }}
        </a-space>
      </div>
      <!-- 头部数据统计 -->
      <div class="header">
        <div class="card" v-for="item in cardList" :key="item.title">
          <a-icon
            :type="item.icon"
            theme="filled"
            :style="{
              'font-size': '50px',
              color: item.color,
              'margin-right': '10px',
            }"
          />
          <div class="card-right">
            <h4>{{ item.num }}</h4>
            <p>{{ $t(item.title) }}</p>
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="mt-[10px]">
      <div style="display: flex; justify-content: flex-end">
        <!-- 操作按钮 -->
        <a-dropdown style="position: relative; top: -10px">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="showModal('0', '0')">
              {{ $t("user.verification-code.required111566129") }}
            </a-menu-item>
          </a-menu>
          <a-button type="primary">
            <a-icon type="bars" />
            {{ $t("di.menus") }}
            <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <!-- 主列表 -->
      <a-table
        ref="table"
        size="middle"
        class="h-full overflow-x-auto"
        :dataSource="listData"
        @change="tableChange"
        :pagination="false"
        :scroll="{ x: 1500, y: 2000 }"
        :loading="listLoading"
        :rowKey="(record) => record.Id"
      >
        <!-- 风险ID -->
        <a-table-column
          key="RiskId"
          data-index="RiskId"
          width="150px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(1);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566123")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect1"
              :filter-data="filterData"
              @searchCommit="searchQuery"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 风险名称 -->
        <a-table-column
          key="RiskName"
          data-index="RiskName"
          width="250px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(2);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566125")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect2"
              :filter-data="filterData"
              @searchCommit="searchQuery"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 风险类型 -->
        <a-table-column
          key="ConfigurationItemsContent"
          :data-index="isLang ? 'RiskTypeStr' : 'RiskTypeStrEn'"
          width="110px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(3);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566127")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect3"
              :single-search="false"
              :filter-data="filterData"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 风险责任人 -->
        <a-table-column
          key="RiskOwnerUserName"
          data-index="RiskOwnerUserName"
          width="170px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(4);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566128rw")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect4"
              :single-search="false"
              :filter-data="filterData"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- DCO -->
        <a-table-column
          key="RiskDcoUserName"
          data-index="RiskDcoUserName"
          width="90px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(5);
            }
          "
        >
          <span slot="title">DCO</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect5"
              :single-search="false"
              :filter-data="filterData"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 风险来源 -->
        <a-table-column
          key="RiskSource"
          data-index="RiskSource"
          width="180px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(6);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566126")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect6"
              :filter-data="filterData"
              @searchCommit="searchQuery"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 开始时间 -->
        <a-table-column
          key="RiskCreatetime"
          data-index="RiskCreatetime"
          width="120px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(7);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566110577371442281431565656")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect7"
              :single-search="false"
              :filter-data="filterData"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 截止时间 -->
        <a-table-column
          key="RiskDeadline"
          data-index="RiskDeadline"
          width="120px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(8);
            }
          "
        >
          <span slot="title">{{
            $t("user.verification-code.required111566132")
          }}</span>
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect8"
              :single-search="false"
              :filter-data="filterData"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
        </a-table-column>
        <!-- 状态 ---------------------------------------->
        <a-table-column
          key="RiskState"
          :title="$t('app.setting.content-width.fluid')"
          width="110px"
          @filterDropdownVisibleChange="
            (e) => {
              if (e) this.setValus(9);
            }
          "
        >
          <span
            slot="filterDropdown"
            slot-scope="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <table-select
              ref="tableselect9"
              :single-search="false"
              :filter-data="filterData"
              @searchFilter="searchQueryFilter"
              @searchClose="confirm"
              @searchClean="tableCleanJobs"
            />
          </span>
          <template slot-scope="text, record">
            <span>
              <div v-if="record.RiskState === 1">
                <a-badge color="blue" />{{
                  $t("user.verification-code.required111566133")
                }}
              </div>
              <div v-else-if="record.RiskState == 2">
                <a-badge color="red" />
                {{ $t("user.verification-code.required1115661444444") }}
              </div>
              <div v-else-if="record.RiskState == 3">
                <a-badge color="purple" />
                {{ $t("user.verification-code.required111566145") }}
              </div>
              <div v-else-if="record.RiskState === 4">
                <a-badge color="green" />
                {{ $t("user.verification-code.required111566146") }}
              </div>
              <div v-else-if="record.RiskState === 5">
                <a-badge color="grey" />
                {{
                  $t(
                    "user.verification-code.required11156611057737144228143122233556655"
                  )
                }}
              </div>
            </span>
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column
          key="action"
          :title="$t('app.setting.othersettings')"
          width="80px"
          fixed="right"
        >
          <template slot-scope="text, record">
            <span>
              <a-dropdown :trigger="['click']">
                <a-button type="link" @click="jobsControllerExec(record)">
                  <a-icon type="more" />
                </a-button>
                <template
                  #overlay
                  v-if="
                    records.read ||
                    records.edit ||
                    records.delete ||
                    records.review
                  "
                >
                  <a-menu>
                    <!-- 查看 -->
                    <a-menu-item
                      v-if="records.read"
                      @click="showModal('2', record.Id)"
                    >
                      <a-button type="link">{{ $t("risk.read") }}</a-button>
                    </a-menu-item>
                    <!-- 修改按钮 -->
                    <a-menu-item
                      v-if="records.edit"
                      @click="showModal('1', record.Id)"
                    >
                      <a-button type="link">{{
                        $t("user.verification-code.required111566147")
                      }}</a-button>
                    </a-menu-item>
                    <!-- 删除按钮 -->
                    <a-menu-item v-if="records.delete">
                      <a-popconfirm
                        :title="
                          $t('user.verification-code.required111566110577225')
                        "
                        :ok-text="$t('user.verification-code.required1166')"
                        :cancel-text="$t('user.email.required11')"
                        @confirm="() => del(record.Id)"
                      >
                        <a-button
                          type="link"
                          style="width: 100%; text-align: left"
                          >{{ $t("app.setting.copy") }}</a-button
                        >
                      </a-popconfirm>
                    </a-menu-item>
                    <!-- 审阅 -->
                    <a-menu-item
                      v-if="records.review"
                      @click="showReview('2', record)"
                    >
                      <a-button type="link">{{
                        $t("user.verification-code.required111566148")
                      }}</a-button>
                    </a-menu-item>
                  </a-menu>
                </template>
                <template v-else> {{ $t("risk.noull") }} </template>
              </a-dropdown>
            </span>
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页 -->
      <a-pagination
        size="small"
        v-model="pagination.page"
        :total="pagination.total"
        hideOnSinglePage
        :pageSize.sync="pagination.pageSize"
        @change="getList"
      />
    </a-card>

    <!-- 抽屉组件  ref绑定save  succeed绑定初始化的 init事件  -->
    <keep-alive>
      <createRisk
        ref="createRisk"
        @succeed="init"
        @initEditId="initEditId"
        @getList="getList"
        :userList="userList"
        :riskLevel="riskLevel"
        :riskType="riskType"
        :editId="editId"
        :mode="mode"
        @data-updated="delId"
      />
    </keep-alive>
    <riskReview
      ref="riskReview"
      @succeed="init"
      :userList="userList"
      :riskLevel="riskLevel"
      :riskType="riskType"
      :editId="editId"
    ></riskReview>
  </div>
</template>

<script>
import { getUserInfo } from "@/api";
import {
  RISKActionList,
  riskCount,
  riskDelete,
  riskDetail,
  rISKGroup,
  riskLists,
} from "@/api/risk/form";
import { getDcoList, userQuery } from "@/api/common/form";
import { configurationSelect } from "@/api/configs";

import createRisk from "./components/createRisk.vue";
import riskReview from "./components/riskReview.vue";
import tableSelect from "@/components/tableSelect/tableSelect.vue";

export default {
  components: {
    createRisk,
    riskReview,
    tableSelect,
    // Success,
  },
  data() {
    return {
      /**table数据 */
      listData: [],
      // table的loading 状态
      listLoading: false,
      queryForm: {},
      cardList: [
        {
          icon: "gift",
          num: "0",
          title: "user.verification-code.required111566110577366",
          color: "blue",
        },
        {
          icon: "bank",
          num: "0",
          title: "user.verification-code.required111566110577367",
          color: "green",
        },
        {
          icon: "control",
          num: "0",
          title: "user.verification-code.required111566110577368",
          color: "firebrick",
        },
        {
          icon: "camera",
          num: "0",
          title: "user.v.required111566110577369",
          color: "lawngreen",
        },
      ],
      riskSource: [
        { label: "dpia", value: "dpia" },
        { label: "手动创建", value: "手动创建" },
      ],
      modalTitle: "",
      visible: false,
      showSteps: false,
      userList: [],
      riskLevel: [],
      riskType: [],
      // 分页参数
      pagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      current: 0,
      //点向子组件传所选项的数据
      editList: {},
      //点编辑向子组件传所选状态
      editType: "",
      //点编辑向子组件传所选项ID
      editId: 0,
      FengList: [],
      clicked1: false,
      clicked2: false,
      clicked3: false,
      inputValue2: "",
      inputValue1: "",
      inputValue3: "",
      //空模版的ID
      delid: "",
      // 合并搜索筛选
      setValusKey: "",
      filterData: [],
      userInfos: "",
      records: {},
      // 所有DCO的列表
      dcoLists: [],

      mode: null, // 状态判断标志位
      kvMap: [
        "",
        "RiskId",
        "RiskName",
        "ConfigurationItemsContent",
        "RiskOwnerUserName",
        "RiskDcoUserName",
        "RiskSource",
        "RiskStartTime",
        "RiskDeadline",
        "RiskState",
      ],
      okyMap: ["", "RiskIds", "RiskNames", "", "", "", "RiskSources"],
      isLang: localStorage.getItem("lang").includes("zh-CN"),
    };
  },
  created() {
    this.init();
  },
  mounted() {
    let that = this;
    /**
     * 深监听事件
     * 获取语言切换
     */
    this.$nextTick(() => {
      this.isLang = localStorage.getItem("lang").includes("zh-CN");
    });
    window.addEventListener("setItemEvent", function (e) {
      if (e.key === "lang") {
        let lang = JSON.parse(e.value);
        console.log(lang);
        if (lang === "zh-EN") {
          that.translateLang(1);
          that.isLang = false;
        } else {
          that.translateLang();
          that.isLang = true;
        }
      }
    });
  },
  methods: {
    /**
     * 创建成功刷新列表 or 初始化事件
     * 通用的 如果搜索条件有下拉列表 就需要放这里面
     * @returns {Promise<void>}
     */
    async init() {
      this.listLoading = true;
      try {
        /**
         * 获取用户信息
         */
        const { data: userInfos } = await getUserInfo();
        this.userInfos = userInfos;

        /**
         * 获取所有DCO的列表
         */
        const { data: dcoLists } = await getDcoList();
        this.dcoLists = dcoLists;

        const { data } = await riskCount();
        /**
         * 统计数据
         */
        this.cardList[0].num = data[0].Totals;
        this.cardList[1].num = data[0].Submitted;
        this.cardList[2].num = data[0].Draft;
        this.cardList[3].num = data[0].Completed;

        /**
         * 获取用户列表下拉
         */
        const { data: userList } = await userQuery(1);
        this.userList = userList;

        /**
         * 初始风险等级
         */
        const { data: riskLevel } = await configurationSelect({
          state: 8,
          types: this.isLang ? 0 : 1,
        });
        this.riskLevel = riskLevel;
        console.log('this.riskLevel',this.riskLevel);

        /**
         * 风险类型
         */
        const { data: riskType } = await configurationSelect({
          state: 9,
          types: this.isLang ? 0 : 1,
        });
        this.riskType = riskType;

        /**
         * 获取数据
         * @type {number}
         */
        this.pagination.page = 1;
        await this.getList();
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    /**
     * 菜单「操作」列 => 权限控制
     * @param record
     * @returns {Promise<*>}
     */
    async jobsControllerExec(record) {
      // 编辑
      record.edit = await this.jobsController(record, "edit");
      // 审阅
      record.review = await this.jobsController(record, "review");
      // 删除
      record.delete = await this.jobsController(record, "delete");
      // 读取
      record.read = await this.jobsController(record, "read");
      this.records = record;
    },
    /**
     * 列表字段的权限判断
     * @param record 单行内容
     * @param status 状态
     * @returns {Promise<boolean>}
     *
     * RISK的状态 == 1 (草稿)
     * 删除的场景
     * 当前用户ID == 创建人ID RiskCreateUserId
     *
     * 编辑的场景
     * 当前用户ID == 创建人ID RiskCreateUserId
     *
     * 查看的场景
     * 当前用户ID == 创建人ID RiskCreateUserId
     *
     * RISK的状态 == 3 (进行中)
     * 编辑的场景
     * 当前用户ID == RISK负责人ID RiskOwnerUserId
     *
     * 查看的场景
     * 当前用户ID == 创建人ID RiskCreateUserId
     * 当前用户ID == 负责人ID RiskOwnerUserId
     * 当前用户ID == DCO ID RiskDcoUserId
     *
     * RISK的状态 == 2 (已提交)
     * 审批的场景
     * 当前用户ID == RISK DCO ID RiskDcoUserId
     *
     * 退回的场景
     * 当前用户ID == RISK DCO ID RiskDcoUserId
     *
     * 查看的场景
     * 当前用户ID == 创建人ID RiskCreateUserId
     * 当前用户ID == 负责人ID RiskOwnerUserId
     * 当前用户ID == DCO ID RiskDcoUserId
     *
     * RISK的状态 == 4 (已完成)
     * 查看的场景
     * 当前用户ID == 创建人ID RiskCreateUserId
     * 当前用户ID == 负责人ID RiskOwnerUserId
     * 当前用户ID == DCO ID RiskDcoUserId
     *
     */
    async jobsController(record, status) {
      // 如果是DCO，全部权限都有
      if (
        this.dcoLists.indexOf(this.userInfos.YtId) !== -1 &&
        status === "read"
      ) {
        return true;
      }
      // 不是DCO才进入判断
      if (record.RiskState === 1) {
        if (status === "delete" || status === "edit" || status === "read") {
          return this.userInfos.YtId === record.RiskCreateUserId;
        } else {
          return false;
        }
      } else if (record.RiskState === 3) {
        if (status === "edit") {
          return this.userInfos.YtId === record.RiskOwnerUserId;
        }
        if (status === "read") {
          let { data } = await RISKActionList({
            page: 1,
            pageSize: 100000,
            RiskId: record.Id,
          });
          let actions = data.Lists.map((item) => {
            return item.DpiaActionUserId;
          });
          return (
            this.userInfos.YtId === record.RiskCreateUserId ||
            this.userInfos.YtId === record.RiskOwnerUserId ||
            this.userInfos.YtId === record.RiskDcoUserId ||
            actions.includes(this.userInfos.YtId)
          );
        }
        return false;
      } else if (record.RiskState === 2) {
        if (status === "review") {
          return this.userInfos.YtId === record.RiskDcoUserId;
        }
        if (status === "read") {
          return (
            this.userInfos.YtId === record.RiskCreateUserId ||
            this.userInfos.YtId === record.RiskOwnerUserId ||
            this.userInfos.YtId === record.RiskDcoUserId
          );
        }
        return false;
      } else if (record.RiskState === 4) {
        if (status === "read") {
          return (
            this.userInfos.YtId === record.RiskCreateUserId ||
            this.userInfos.YtId === record.RiskOwnerUserId ||
            this.userInfos.YtId === record.RiskDcoUserId
          );
        }
        return false;
      }
    },
    // 查询Filter逻辑
    async setValus(typeId) {
      this.listLoading = true;
      try {
        // 调用查询列表
        const { data } = await rISKGroup({ Condition: typeId ,pageType:0  });
        // 赋值类型，用于筛选、搜索的直接调用
        for (let j = 0; j < data.length; j++) {
          if (typeId === 9) {
            switch (data[j].value) {
              case 1:
                data[j].text = this.$t(
                  "user.verification-code.required111566133"
                );
                break;
              case 2:
                data[j].text = this.$t(
                  "user.verification-code.required1115661444444"
                );
                break;
              case 3:
                data[j].text = this.$t(
                  "user.verification-code.required111566145"
                );
                break;
              case 4:
                data[j].text = this.$t(
                  "user.verification-code.required111566146"
                );
                break;
              case 5:
                data[j].text = `${this.$t(
                  "user.verification-code.required11156612288889"
                )}`;
                break;
              default:
                break;
            }
          } else {
            data[j].text = data[j].value;
          }
        }
        this.setValusKey = typeId;
        // 赋值筛选的列表，直接赋值
        if (localStorage.getItem("lang") == '"zh-CN"') {
          for (let i = 0; i < data.length; i++) {
            data[i].text = data[i].text;
          }
        } else if (typeId === 3) {
          for (let i = 0; i < data.length; i++) {
            data[i].text = data[i].textEn;
          }
        }

        this.filterData = data;
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    /**
     * 清空查询数据，并且执行查询
     * @returns {Promise<void>}
     */
    async tableCleanJobs(type) {
      this.pagination.page = 1;
      if (type === "part") {
        this.queryForm[this.kvMap[this.setValusKey]] = undefined;
        this.queryForm[this.okyMap[this.setValusKey]] = undefined;
      } else {
        this.queryForm = {};
        for (let i = 1; i <= 9; i++) {
          let dom = this.$refs[`tableselect${i}`];
          if (dom) {
            dom.inputValue = "";
            dom.inputCheckValue = [];
          }
        }
      }
      this.inputValue = "";
      await this.getList();
    },
    /**
     * 列表搜索查询
     * @param e 搜索的值
     * @returns {Promise<void>}
     */
    async searchQuery(e) {
      this.queryForm[this.kvMap[this.setValusKey]] = undefined;
      this.queryForm = {
        ...this.queryForm,
        [this.okyMap[this.setValusKey]]: e,
      };
      await this.getList("filter");
    },

    /**
     * 列表筛选查询
     * @param e 筛选的值
     * @returns {Promise<void>}
     */
    async searchQueryFilter(e, original) {
      this.queryForm[this.okyMap[this.setValusKey]] = undefined;
      this.queryForm = {
        ...this.queryForm,
        [this.kvMap[this.setValusKey]]:
          this.setValusKey === 4 ? original.join("#@%$") : e,
      };
      await this.getList("filter");
    },
    /**
     * 获取子组件空模版ID--删除
     * @param data
     * @returns {Promise<void>}
     */
    async delId(data) {
      this.delid = data;
      await riskDelete({ Id: this.delid });
      await this.init();
    },
    /**
     * 切换中英文,对应的内容也要切换
     * @param types
     * @returns {Promise<void>}
     */
    async translateLang(types) {
      if (types === 1) {
        //初始风险等级
        const { data: riskLevel } = await configurationSelect({
          state: 8,
          types: 1,
        });
        this.riskLevel = riskLevel;
        //风险类型
        const { data: riskType } = await configurationSelect({
          state: 9,
          types: 1,
        });
        this.riskType = riskType;
      } else {
        //初始风险等级
        const { data: riskLevel } = await configurationSelect({ state: 8 });
        this.riskLevel = riskLevel;
        //风险类型
        const { data: riskType } = await configurationSelect({ state: 9 });
        this.riskType = riskType;
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getList(state) {
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      const { data } = await riskCount();
      this.cardList[0].num = data[0].Totals;
      this.cardList[1].num = data[0].Submitted;
      this.cardList[2].num = data[0].Draft;
      this.cardList[3].num = data[0].Completed;
      try {
        if (state === "filter") {
          // 调用查询列表
          const { data } = await riskLists({
            ...{ page: 1, pageSize: 10, pageType:0 },
            ...this.queryForm,
          });
          // 解构赋值
          const { Page, PageSize, Total, Lists } = data;
          // 给table赋值
          this.listData = Lists || [];
          // 给分页数据赋值
          this.pagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          };
        } else {
          // 调用查询列表
          const { data } = await riskLists({
            ...{ page, pageSize ,pageType:0 },
            ...this.queryForm,
          });
          // 解构赋值
          const { Page, PageSize, Total, Lists } = data;
          // 给table赋值
          this.listData = Lists || [];
          // 给分页数据赋值
          this.pagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          };
        }
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    async showModal(state, editId) {
      if (state === "0") {
        await this.$refs.createRisk.open(state);
      } else if (state === "1" || state === "2") {
        try {
          this.editId = editId;
          this.mode = state;
          const { data } = await riskDetail({ Id: editId });
          await this.$refs.createRisk.open(Number(state), data, this.editId);
        } catch (error) {
          // 报错信息
          this.$message.error(error);
        } finally {
          // 不管成功失败都会执行
          this.listLoading = false;
        }
      } else {
        try {
          this.editId = editId;
          //回显传值
          const { data } = await riskDetail({ Id: editId });
          this.mode = state;
          console.log(state, data, this.editId);
          await this.$refs.createRisk.open(state, data, this.editId);
        } catch (error) {
          // 报错信息
          this.$message.error(error);
        } finally {
          // 不管成功失败都会执行
          this.listLoading = false;
        }
      }
    },
    async showReview(state, row) {
      try {
        this.editId = row.Id;
        //回显传值
        const { data } = await riskDetail({ Id: this.editId });
        await this.$refs.riskReview.open(state, data, this.editId, row);
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    /**
     * 删除
     * @param id
     * @returns {Promise<void>}
     */
    async del(id) {
      this.listLoading = true;
      try {
        await riskDelete({ Id: id });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        await this.getList();
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    initEditId() {
      this.editId = 0;
    },
    tableChange(e, searchInputs) {
      var parames = Object.keys(searchInputs);
      for (var i = 0; i < parames.length; i++) {
        searchInputs[parames[i]] = searchInputs[parames[i]].join();
      }
      this.queryForm = { ...searchInputs };
      this.getList("filter");
    },
    /**
     * 搜索1
     * @returns {Promise<void>}
     */
    async tableSearch1() {
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await riskLists({
          ...{ page: 1, pageSize: 10,pageType:0  },
          ...(this.queryForm = {
            RiskIds: this.inputValue1,
            RiskNames: this.inputValue1,
          }),
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.listData = Lists || [];
        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
      this.clicked1 = false;
      this.inputValue1 = "";
    },
    /**
     * 搜索2
     * @returns {Promise<void>}
     */
    async tableSearch2() {
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await riskLists({
          ...{ page: 1, pageSize: 10 ,pageType:0 },
          ...(this.queryForm = {
            RiskName: this.inputValue2,
          }),
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.listData = Lists || [];
        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
      this.clicked2 = false;
      this.inputValue2 = "";
    },
    /**
     * table1搜索重置2
     * @returns {Promise<void>}
     * @constructor
     */
    async ReaTable2() {
      this.pagination.page = 1;
      this.queryForm = {};
      await this.getList();
      this.inputValue2 = "";
      this.clicked2 = false;
    },
    /**
     * 关闭抽屉
     */
    closeDrawer() {
      this.editList = {};
      this.editId = 0;
      this.editType = "";
      this.current = 0;
      this.showSteps = false;
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
// 分页
.fy {
  margin-left: 100px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;

  padding: 20px;
  padding-right: 50px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    width: 50px;
    color: #999;
  }
}

/deep/ .ant-table-thead {
  background: #f4f7ff;
  font-weight: 700;
}

/deep/ .drawer-form {
  margin-bottom: 40px;

  .ant-form-item {
    margin-right: 50px;
  }

  .ant-form-item-label {
    display: inline-block;
    // line-height: 30px;
    min-width: 95px;
  }

  .checkbox {
    background: #eee;
    padding: 10px;
    margin-top: 16px;
    position: relative;
    top: -10px;
    left: -10px;

    .ant-form-item-label {
      display: inline-block;
      line-height: 30px;
      // width: 150px;
      // margin-right: 10px;
    }
  }
}

.import-butoon {
  float: left;
  margin-top: -50px;
  margin-left: 100px;
}

.drawerHeader {
  width: 500px;
  margin: auto;
}

.ant-pagination {
  float: right;
}
</style>